import { getProcessById } from "@/apis/process"
import { Card, Breadcrumb, Tabs, message, Space, Button } from "antd"
import { useEffect, useState } from "react"
import { Link, useLocation } from "react-router-dom"
import ResultTable from "./ResultTable"
import {
  FolderOpenOutlined,
} from '@ant-design/icons'
import './index.scss'


const ShowResult = () => {
  const location = useLocation()
  const queryParams = new URLSearchParams(location.search)
  const process_id = queryParams.get('id')
  const title = queryParams.get('title')
  const i_time = parseInt(queryParams.get('i_time'))

  const [activeKey, setActiveKey] = useState('0')

  const [txtContent, setTxtContent] = useState([])
  const [folderContent, setFolderContent] = useState([])

  useEffect(() => {
    const getResult = async () => {
      try {
        const res = await getProcessById(process_id, activeKey)
        console.log(res)
        setTxtContent(res.txt_content)
        setFolderContent(res.folder_content)
      } catch (error) {
        message.error('获取失败')
      }

    }
    getResult()
  }, [process_id, activeKey])



  const generateItem = () => {
    return new Array(i_time + 1).fill(null).map((_, i) => {
      const id = String(i)
      const exportName = title + '_' + (id === '0' ? 'Final' : `Result${id}`)
      return {
        label: id === '0' ? 'Final' : `Result${id}`,
        key: id,
        icon: <FolderOpenOutlined />,
        children: (
          txtContent && <ResultTable txtContent={txtContent} folderContent={folderContent}
            exportName={exportName}
          />
        ),
      }
    })
  }

  const items = generateItem()

  // 根据tab的ActiveKey请求不同的结果
  const onTabChange = (value) => {
    setActiveKey(value)
  }


  return (
    <div>
      <Card
        title={
          <Space size={'large'}>
            <Breadcrumb items={[
              { title: <Link to={'/'}>首页</Link> },
              { title: <Link to={'/process'}>运行列表</Link> },
              { title },
            ]}
              className='breadcrumb'
            />
          </Space>



        }
        style={{
          height: '80vh'
        }}
      >
        <Tabs
          defaultActiveKey="0"
          activeKey={activeKey}
          type="card"
          // tabPosition={mode}
          style={{
            height: 220,
          }}
          items={items}
          onChange={onTabChange}
          size='large'
        />


      </Card>

    </div>
  )
}

export default ShowResult